/* Navbar 吸顶效果样式 */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
  will-change: transform;
  backdrop-filter: blur(0px);
}

/* 导航栏可见状态 */
.navbar-visible {
  transform: translateY(0);
}

/* 导航栏隐藏状态 */
.navbar-hidden {
  transform: translateY(-100%);
}

/* 滚动时的阴影效果 */
.navbar-scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 确保页面内容不被导航栏遮挡 */
body {
  padding-top: 46px; /* 根据 NavBar 的实际高度调整 */
}

/* 针对不同页面的内容区域调整 */
.page-content {
  margin-top: 46px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar-container {
    /* 在移动端可能需要调整 z-index */
    z-index: 1001;
  }
}

/* 平滑滚动优化 */
.navbar-container * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* 确保导航栏在所有情况下都可见 */
.navbar-container .adm-nav-bar {
  background: transparent;
}

/* 添加微妙的边框效果 */
.navbar-scrolled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

/* 优化滚动性能 */
.navbar-container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 添加淡入淡出效果 */
.navbar-visible {
  opacity: 1;
  visibility: visible;
}

.navbar-hidden {
  opacity: 0;
  visibility: hidden;
}

/* 确保导航栏内容居中 */
.navbar-container .adm-nav-bar {
  background: transparent;
  border-bottom: none;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .navbar-container {
    /* 在移动端可能需要调整 z-index */
    z-index: 1001;
  }
  
  /* 移动端滚动时的效果 */
  .navbar-scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
  }
}
